<template>
  <div>
    <el-dialog
      title="班级管理"
      :close-on-click-modal="false"
      @close="visible = false"
      :visible.sync="visible"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年级" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请选择年级"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程名称" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请选择课程名称"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="期次" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请选择期次"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅导老师" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请选择辅导老师"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="right">
        <el-button type="primary" @click="addVisible = true" size="small"
          >新增班级</el-button
        >
      </div>
      <el-table :data="list" header-cell-class-name="thead">
        <el-table-column
          v-for="(col, index) in table"
          :prop="col.prop"
          :label="col.label"
          :formatter="col.formatter"
          :width="col.width"
          :key="index"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button size="small" type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-size="page.pageSize"
        layout="prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="新增班级"
      :close-on-click-modal="false"
      @close="addVisible = false"
      :visible.sync="addVisible"
    >
      <el-form
        :model="dataForm"
        :rules="classRule"
        ref="dataForm"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="年级" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请选择年级"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程名称" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请选择课程名称"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="期次" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请选择期次"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅导老师" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请选择辅导老师"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="班级名称" prop="class">
              <nice-select
                v-model="dataForm.class"
                placeholder="请输入班级名称"
                clearable
              ></nice-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false" size="small">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        class: ""
      },
      dataRule: {},
      list: [{ name: "uuuu", phone: "15205678233" }],
      page: {
        pageNum: 1,
        pageSize: 10
      },
      addVisible: false,
      total: 0,
      table: [
        {
          label: "班级",
          prop: "name"
        },
        {
          label: "学生数量",
          prop: "phone"
        },
        {
          label: "辅导老师",
          prop: "phone"
        },
        {
          label: "创建时间",
          prop: "phone"
        }
      ],
      classRule: {}
    };
  },
  methods: {
    init() {
      this.visible = true;
    },
    dataFormSubmit() {},
    handleEdit(row) {},
    handleDelete(row) {
      this.$confirm("确定进行删除操作", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    handleCurrentChange(val) {}
  }
};
</script>
